<template>
  <div class="min-h-screen bg-gray-100 pb-20">
    <!-- 页面标题 -->
    <header class="fixed top-0 left-0 w-full h-14 bg-blue-600 flex items-center z-50 px-4 shadow-md">
      <h2 class="text-white font-bold text-lg">限时抢购</h2>
    </header>

    <!-- 内容区域 -->
    <div class="pt-16 px-4">

      <!-- 抢购商品列表 -->
      <ul class="space-y-4">
        <li v-for="(item, index) in flashSales" :key="index" class="bg-white rounded-lg shadow-sm overflow-hidden">
          <div class="flex p-4">
            <img :src="item.image" alt="商品图片" class="w-20 h-20 object-cover rounded transition-opacity duration-500 ease-in-out opacity-0" @load="(e) => e.target.classList.remove('opacity-0')" />
            <div class="ml-4 flex-1">
              <h3 class="text-base font-semibold">{{ item.name }}</h3>
              <p class="text-sm text-gray-600 mt-1">{{ item.description }}</p>
              <div class="flex justify-between items-center mt-2">
                <div>
                  <span class="text-red-500 font-bold">￥{{ item.salePrice }}</span>
                  <span class="text-gray-400 line-through text-sm ml-2">￥{{ item.originalPrice }}</span>
                </div>
                <button @click="addToCart(item)" class="bg-red-500 hover:bg-red-600 text-white px-4 py-1 rounded text-sm transition-colors duration-200">
                  立即抢购
                </button>
              </div>
            </div>
          </div>
        </li>
      </ul>

    </div>

    <!-- 底部导航栏 -->
    <FooterMenu />
  </div>
</template>

<script setup lang="ts">
import FooterMenu from '@/components/common/FooterMenu.vue'

const flashSales = [
  {
    name: '牛肉汉堡套餐',
    description: '经典牛肉汉堡 + 可乐 + 薯条',
    originalPrice: 39.9,
    salePrice: 19.9,
    image: '/img/sj03.png'
  },
  {
    name: '鲜果奶茶套餐',
    description: '招牌鲜果奶茶 + 芝士蛋糕',
    originalPrice: 45.0,
    salePrice: 25.0,
    image: '/img/dcfl05.png'
  },
  {
    name: '麻辣香锅套餐',
    description: '川味麻辣香锅 + 米饭 + 饮料',
    originalPrice: 48.0,
    salePrice: 29.9,
    image: '/img/sj02.png'
  }
]

function addToCart(item) {
  alert(`已加入购物车：${item.name} - ￥${item.salePrice}`)
}
</script>
